<template>
    <div class="earning">
        <div class="divBlock">
            <div>
                <p>收益</p>
                <table class="table1" style="margin-left:40px;margin-top:70px;">
                    <tr>
                        <td style="width:120px;height:120px;border-radius: 60px;border: 1px solid #DFDFDF;"><img src="../../assets/logo.png"></td>
                        <td style="padding-left:40px;text-align:left;">
                            <p>总收益：<span style="color:#FF503F">479,368</span></p>
                            <p>门票收入：<span>1,368</span></p>
                            <p>收到的打赏：<span>324,368</span></p>
                        </td>
                    </tr>
                </table>
            </div>
            <div style="margin-left:2.5%;">
                <p>提现</p>
                <table style="margin-left:30px;margin-top:60px;">
                    <tr style="height:70px;">
                        <td style="width:50px;height:50px;"><img src="../../assets/earning_1.png"></td>
                        <td colspan="2" style="padding-left:40px;text-align:left;">
                            <p style="color:#647CF0;font-size:24px;font-weight:bold;">4,368</p>
                            <p>未提现收益</p>
                        </td>
                    </tr>
                    <tr style="height:70px;">
                        <td style="width:50px;height:50px;"><img src="../../assets/home_4.png"></td>
                        <td style="padding-left:40px;text-align:left;">
                            <p style="color:#62ACF4;font-size:24px;font-weight:bold;">4,368</p>
                            <p>可提现收益</p>
                        </td>
                        <td style="padding-left:60px;">
                            <router-link to="/earningForm"><el-button type="primary">提现</el-button></router-link>
                            <router-link to="/earningTable"><span style="margin-left:10px;font-size:14px;color:#62ACF4;text-decoration:underline;">提现历史</span></router-link>
                        </td>
                    </tr>
                </table>
            </div>
        </div>
        <p>活动收益明细</p>
        <el-table :data="tableData2" stripe border style="width: 100%;margin-top:20px;margin-bottom:40px;" :default-sort = "{prop: 'date', order: 'descending'}">
            <el-table-column prop="name" label="活动名称" width="200"></el-table-column>
            <el-table-column prop="time" label="活动时间" width="180"></el-table-column>
            <el-table-column prop="key" label="门票收益(元)" ></el-table-column>
            <el-table-column prop="price" label="打赏收益(元)"></el-table-column>
            <el-table-column prop="minute" label="总收益(元)" ></el-table-column>
        </el-table>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                tableData2: [{
                        name: '变形金刚来中国啦',
                        time: '2016-12-31 13:00',
                        key: '6990',
                        price: '47890',
                        minute: '69838'
                    }, {
                        name: '变形金刚来中国啦',
                        time: '2016-12-31 13:00',
                        key: '6990',
                        price: '47890',
                        minute: '69838'
                    }, {
                        name: '变形金刚来中国啦',
                        time: '2016-12-31 13:00',
                        key: '6990',
                        price: '47890',
                        minute: '69838'
                    }, {
                        name: '变形金刚来中国啦',
                        time: '2016-12-31 13:00',
                        key: '6990',
                        price: '47890',
                        minute: '69838'
                }]
            };
        },
        methods: {
        }
    }
</script>

<style>
    * {
        margin: 0;
        padding: 0;
    }

    .earning{
        margin-top: 90px;
        margin-left: 95px;
        width: 89%;
    }

    .divBlock>div{
        width: 48.5%;
        height: 320px;
        border: 1px solid #DFDFDF;
        border-radius: 5px;
        margin-top: 20px;
        display: block;
        float: left;
    }

    .divBlock>div>p{
        height: 42px;
        line-height: 42px;
        font-size: 20px;
        color: white;
        background-color: #38ACF4;
        border-top-left-radius: 5px;
        border-top-right-radius: 5px;
        text-align: left;
        padding-left: 20px;
    }

    .divBlock>table{
        width: 100%;
    }

    .divBlock>.income_content .table1 img{
        width: 120px;
        height: 120px;
    }

    .divBlock .table1 td p{
        line-height: 35px;
    }

    .divBlock .table1 td span{
        font-size: 24px;
        font-weight: bold;
        color: #62ACF4;
    }

    .earning>p{
        border-left: 5px solid #38ACF4;
        float: left;
        margin-top: 20px;
        margin-bottom: 20px;
        padding-left: 10px;
    }
</style>